<template>
	<view>
		<view class="mainpadding2 ffffff line_b9" v-if="appkey&&is_sdkfp==0">
			<view class="text_weight color_san white_nowrap">發票類型<text style="color: #ff0000;">*</text>
			</view>
			<view class="margin_top1 flexbetween">
				<view :class="opentype==0?'flexleft select':'flexleft noSelect'" @click="opentype=0">
					<image class="vote1Img"
						:src="opentype==0?'@/static/images/mine/vote1_active.png':'@/static/images/mine/vote1.png'"
						mode=""></image>
					<view>紙本</view>
				</view>
				<view :class="opentype==1?'flexleft select':'flexleft noSelect'" @click="opentype=1;tbcode=dataAll.user.zjcode">
					<image class="vote2Img"
						:src="opentype==1?'@/static/images/mine/vote2_active.png':'@/static/images/mine/vote2.png'"
						mode=""></image>
					<view>載具</view>
				</view>
				<view :class="opentype==2?'flexleft select':'flexleft noSelect'" @click="opentype=2;tbcode=dataAll.user.tbcode">
					<image class="vote3Img"
						:src="opentype==2?'@/static/images/mine/vote3_active.png':'@/static/images/mine/vote3.png'"
						mode=""></image>
					<view>統編</view>
				</view>
				<view :class="opentype==3?'flexleft select':'flexleft noSelect'" @click="opentype=3;tbcode=dataAll.user.jzcode">
					<image class="vote4Img"
						:src="opentype==3?'@/static/images/mine/vote4_active.png':'@/static/images/mine/vote4.png'"
						mode=""></image>
					<view>捐贈</view>
				</view>
			</view>
			<view class="invoiceInput margin_top1 flexbetween" v-show="opentype!=0">
				<input class="text_b" type="text" placeholder="請輸入手機載具" v-show="opentype==1" v-model="tbcode">
				<input class="text_b" type="text" placeholder="請輸入統一編碼" v-show="opentype==2" @blur="getTt()"
					v-model="tbcode">
				<input class="text_b" type="text" placeholder="請輸入捐贈碼" v-show="opentype==3" v-model="tbcode">
				<view class="" v-show="opentype==1 || opentype==3" @click="getCode()">
					<u-icon name="scan" color="#ffb800" size="28"></u-icon>
				</view>
			</view>
			<view class="invoiceInput margin_top1" v-show="opentype==2">
				<input class="text_b" type="text" placeholder="請輸入發票抬頭" v-model="tbmc">
			</view>
		</view>
		<view class="mainpadding" style="min-width: 750rpx;max-width: 750rpx;">
			<view class="flexleft">
				<view class="bold hei_text" style="font-size: 52rpx;">總計金額：</view>
				<view class="bold xiaohei" style="font-size: 52rpx;" v-text="totalPrice"></view>
			</view>
			<view class="flexleft margin_top1">
				<view class="bold hei_text" style="font-size: 52rpx;">應找金額：</view>
				<view class="bold xiaohong" style="font-size: 52rpx;" v-text="zhaoling"></view>
			</view>
			<view class="margin_top1 sytbox">
				<input type="text" class="sytsrk" placeholder="實收金額" disabled="" v-model="zhifuje" />
			</view>
			<view class="flexbetween flex-wrap margin_top1">
				<view class="itembox flexcenter" v-for="item in numList" :key="item" @click="numtap(item)">{{item}}
				</view>
				<view class="itembox delitem flexcenter" @click="delnum">DEL</view>
			</view>
			<view class="flexbetween margin_top1">
				<view class="payTypeClass xiaobai" style="background-color: #00a0e9;" @click="submit(4)">信用卡</view>
				<view class="payTypeClass xiaobai" style="background-color: #ec7301;" @click="dypay()">多元支付</view>
				<view class="payTypeClass xiaobai" style="background-color: #db0f62;" @click="submit(1)">錢包點數</view>
				<view class="payTypeClass xiaobai" style="background-color: #a70182;" @click="submit(3)">現金支付</view>
			</view>
		</view>
		<u-modal :show="dymodalshow" title="請使用掃描器掃描" confirmColor="#fbb826" confirmText="關閉"
			@confirm="dymodalshow=false">
			<view class="slot-content">
				<view class="mainpadding">
					<view class="flexbetween"
						style="border: 1rpx solid #fbb826; padding: 10rpx 20rpx;border-radius: 10rpx;">
						<input type="text" placeholder="" class="xiaohei" :focus="dyinputfocus" :auto-focus="true"
							v-model="dycode" @confirm="dykoukuan" confirm-type="search" />
						<view class="" @click="dysaoma()">
							<u-icon name="scan" color="#fbb826" size="22"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<fukuanmsg :show="messagefk.fkshow" :paystatus="messagefk.paystatus"></fukuanmsg>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderly: 0, //1预约订單过来的需要直接跳转到预约订單
				tbcode: "",
				tbmc: "",
				opentype: 0,
				zhifuje: "",
				totalPrice: 0, //订單总金额
				numList: [7, 8, 9, 4, 5, 6, 1, 2, 3, "00", 0],
				listid: "",
				dataAll: {},
				appkey: "",
				is_sdkfp: 0,
				dycode: "",
				dyinputfocus: false,
				dymodalshow: false,
				messagefk: {
					fkshow: false,
					paystatus: 1, //1成功，2失败
				},
				issubmit:false
			}
		},
		computed: {
			zhaoling() {
				let price = Number(this.zhifuje) - Number(this.totalPrice)
				if (price >= 0) {
					return price
				} else {
					return 0
				}
			}

		},
		onLoad(options) {
			this.appkey = uni.getStorageSync("appkey")
			this.is_sdkfp = uni.getStorageSync("is_sdkfp")
			this.totalPrice = options.total_price
			this.listid = options.id
			uni.$on("returnCode", data => {
				this.tbcode = data
			})
			this.getDetail()
		},
		onUnload() {
			uni.$off("returnCode")
		},
		methods: {
			clear() {
				this.input = ''
				this.output = '0'
				this.dycode = ""
				this.dymodalshow = false
				this.dyinputfocus = false
			},
			dypay() {
				this.dymodalshow = true
				this.dyinputfocus = true
			},
			async dykoukuan() { //掃碼槍或輸入回車扣款
			if (this.issubmit) return
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let val = 0 //1全支付，2icash支付，3悠悠付，7街口支付，8line pay
				if (this.dycode.substring(0, 2) == 22) val = 7
				if (this.dycode.substring(0, 2) == 38) val = 8
				if (this.dycode.substring(0, 2) == 'P1' || this.dycode.substring(0, 2) == 'P2') val = 11
				if (val == 0) {
					httpRequest.toast("付款碼不存在")
					return false
				}
				this.issubmit = true
				let res1 = await this.http.request('/api/ordergoods/editOrderGoodsInfo', 'GET', {
					id: this.dataAll.order_goods_id,
					opentype: this.appkey ? this.opentype : -1,
					tbcode: this.appkey ? this.tbcode : '',
					tbmc: this.appkey ? this.tbmc : '',
				})
				uni.hideLoading()
				if (res1.code != 1) {
					this.issubmit = false
					httpRequest.toast(res1.msg)
					return false
				}
				uni.showLoading({
					mask: true,
					title: "支付中"
				})
				if (this.dycode.substring(0, 2) == 'P1' || this.dycode.substring(0, 2) == 'P2') { //全支付
					let res2 = await this.http.request("/api/ordergoods/qxpayScan", "POST", {
						shop_id: uni.getStorageSync("shop_id"),
						id: this.dataAll.ordergood.id,
						pay_token: this.dycode
					})
					uni.hideLoading()
					if (res2.code == 1) {
						this.dymodalshow = false
						this.clear()
						this.messagefk = {
							fkshow: true,
							paystatus: 1
						}
						setTimeout(() => {
							uni.navigateBack(1)
							this.messagefk = {
								fkshow: false,
								paystatus: 1
							}
						}, 1000)
					} else {
						this.issubmit = false
						this.dycode = ""
						this.dymodalshow = false
						this.dyinputfocus = false
						this.messagefk = {
							fkshow: true,
							paystatus: 2
						}
						setTimeout(() => {
							uni.navigateBack(1)
							this.messagefk = {
								fkshow: false,
								paystatus: 2
							}
							this.dymodalshow = true
							this.dyinputfocus = true
						}, 1000)
					}
				}
				if (this.dycode.substring(0, 2) == 22) { //街口支付
					let res2 = await this.http.request("/api/ordergoods/jkoPayScan", "POST", {
						shop_id: uni.getStorageSync("shop_id"),
						id: this.dataAll.ordergood.id,
						CardToken: this.dycode,
					})
					uni.hideLoading()
					if (res2.code == 1) {
						this.dymodalshow = false
						this.clear()
						this.messagefk = {
							fkshow: true,
							paystatus: 1
						}
						setTimeout(() => {
							uni.navigateBack(1)
							this.messagefk = {
								fkshow: false,
								paystatus: 1
							}
						}, 1000)
					} else {
						this.issubmit = false
						this.dycode = ""
						this.dymodalshow = false
						this.dyinputfocus = false
						this.messagefk = {
							fkshow: true,
							paystatus: 2
						}
						setTimeout(() => {
							uni.navigateBack(1)
							this.messagefk = {
								fkshow: false,
								paystatus: 2
							}
							this.dymodalshow = true
							this.dyinputfocus = true
						}, 1000)
					}
				}
				if (this.dycode.substring(0, 2) == 38) { //linepay支付
					let res3 = await this.http.request("/api/ordergoods/linepayScan", "POST", {
						shop_id: uni.getStorageSync("shop_id"),
						id: this.dataAll.ordergood.id,
						oneTimeKey: this.dycode,
					})
					uni.hideLoading()
					if (res3.code == 1) {
						this.dymodalshow = false
						this.clear()
						this.messagefk = {
							fkshow: true,
							paystatus: 1
						}
						setTimeout(() => {
							uni.navigateBack(1)
							this.messagefk = {
								fkshow: false,
								paystatus: 1
							}
						}, 1000)
					} else {
						this.issubmit = false
						this.dycode = ""
						this.dymodalshow = false
						this.dyinputfocus = false
						this.messagefk = {
							fkshow: true,
							paystatus: 2
						}
						setTimeout(() => {
							uni.navigateBack(1)
							this.messagefk = {
								fkshow: false,
								paystatus: 2
							}
							this.dymodalshow = true
							this.dyinputfocus = true
						}, 1000)
					}
				}
			},
			async getDetail() {
				let res = await this.http.request('/api/Ordermake/deailOrdermake', 'POST', {
					id: this.listid
				})
				this.tbcode = res.data.tbcode
				this.tbmc = res.data.tbmc
				this.opentype = res.data.opentype
				this.dataAll = res.data
			},
			submit(val) {
				if(this.issubmit) return
				this.issubmit = true
				if (val == 1) {
					uni.navigateTo({
						url: "/pages/dianshupay/dianshupay?type=4&id=" + this.listid
					})
					return false
				}
				this.http.request('/api/ordermake/endmarkmoney', 'POST', {
					id: this.dataAll.order_goods_id,
					opentype: this.appkey ? this.opentype : -1,
					tbcode: this.appkey ? this.tbcode : '',
					tbmc: this.appkey ? this.tbmc : '',
					paytype: val
				}).then(res => {
					if (res.code == 1) {
						this.http.toast("收款完成")
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						this.issubmit = false
						this.http.toast(res.msg)
					}
				})
			},
			getCode() {
				uni.navigateTo({
					url: "/pages/my/getcodetwm"
				})
			},
			getTt() {
				if (this.opentype != 2) {
					return false
				}
				this.http.request("/api/user/getTbmc", "GET", {
					tbcode: this.tbcode
				}).then(res => {
					if (res.code == 1) {
						this.tbmc = res.data.tbinfo.name
					}
				})
			},
			numtap(item) {
				if (Number(item) == 0 && this.zhifuje == "") {
					return false
				}
				this.zhifuje = this.zhifuje + item
			},
			delnum() {
				let str = this.zhifuje;
				let newStr = str.slice(0, -1);
				this.zhifuje = newStr
				// 输出: Hello Worl
			},
		}
	}
</script>

<style lang="scss" scoped>
	.paddinglr {
		padding: 0 30rpx;
	}

	.header {
		padding: 6rpx;
		box-sizing: border-box;
		background: #F1F1F1;
		border-radius: 72rpx 72rpx 72rpx 72rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;

		view {
			width: 45%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F1F1F1;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #666666;
		}

		.selects {
			width: 45%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #fff3e6;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FF8505;
		}
	}

	.payTypeClass {
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		padding: 40rpx 0;
		width: 150rpx;
	}

	.sytbox {
		border: 1rpx solid #000;
		border-radius: 10rpx;
		padding: 15rpx 30rpx;
	}

	.itembox {
		margin-top: 15rpx;
		width: 200rpx;
		height: 180rpx;
		border: 1rpx solid #000;
		border-radius: 10rpx;
		font-size: 60rpx;
		font-weight: bold;
		box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.16);
	}

	.delitem {
		background-color: #013447 !important;
		color: #fff !important;
	}

	.sytsrk {

		text-align: right;
		font-size: 40rpx;
		font-weight: bold;
	}


	.select {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FF8505;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		position: relative;
	}

	.select::after {
		content: '';
		width: 25rpx;
		height: 20rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		background-image: url('/static/images/mine/invoice_select.png');
		background-size: 100% 100%;
	}

	.vote1Img {
		width: 26rpx;
		height: 26rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote2Img {
		width: 23.5rpx;
		height: 23.5rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote3Img {
		width: 29rpx;
		height: 29rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.vote4Img {
		width: 27rpx;
		height: 27rpx;
		margin-left: 20rpx;
		margin-right: 10rpx;
	}

	.noSelect {
		width: 154rpx;
		height: 69rpx;
		text-align: center;
		line-height: 69rpx;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.invoiceInput {
		width: 100%;
		height: 91rpx;
		background: rgba(196, 196, 196, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
</style>